<!--
 * @Author: 毕晨曦 
 * @Date: 2024-07-28 20:43:39
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-08-01 22:45:20
 * @FilePath: /xing-fu-da-zi-weapp/src/pages/message/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="content">
    <scroll-view
      class="scroll-box"
      scroll-y="true"
      scroll-with-animation="true"
    >
      <view v-for="(msgInfo, idx) in chatList" :key="idx">
        <AIMessageItem :text="msgInfo.content" :ai="msgInfo.ai" />
      </view>
      <div style="height: 420rpx"></div>
    </scroll-view>
    <div
      style="
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        height: 180px;
        background: white;
        padding: 12rpx;
      "
    >
      <u-input
        :adjust-position="false"
        style="
          height: 140rpx;
          width: 100%;
          border: 1px solid #ddd;
          padding: 12rpx;
        "
        type="text"
        class="content"
        id="input"
        v-model="content"
        :confirm-type="'send'"
        :confirm-hold="true"
        placeholder-style="color:#DDD;"
        :cursor-spacing="6"
        @confirm="handleClick"
        :placeholder="'我是AI教练, 有什么问题可以问我哦，点击和我聊聊吧！'"
      />
      <u-button
        text="发送"
        color="#81d8d0"
        :loading="loading"
        @click="handleClick"
      ></u-button>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { onMounted } from "vue";
import AIMessageItem from "@/components/aImessageItem/index.vue";
import { nextTick } from "vue";

import { sendMeessage } from "@/api/ai";

const token = uni.getStorageSync("token");
const userInfo = uni.getStorageSync("userInfo");
const loading = ref(false);
const chatList = ref<
  {
    content: string;
    ai: boolean;
    id: number;
  }[]
>([]);

const content = ref("");

function handleClick() {
  loading.value = true;
  chatList.value.push({
    content: content.value,
    ai: false,
    id: Math.random() * 1000000000000000000,
  });
  nextTick(() => {
    uni.pageScrollTo({
      scrollTop: 2000000, //滚动到页面的目标位置（单位px）
      duration: 0, //滚动动画的时长，默认300ms，单位 ms
    });
  });
  uni.request({
    url: "https://hunlianjiaxiao.cn/api/ai/message", // 你自己的路径
    method: "POST",
    header: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: token,
    }, // 请求头
    dataType: "json",
    data: {
      message: content.value,
    }, // 需要穿的数据
    success: function (res) {
      const id = Math.random() * 1000000000000000000;
      chatList.value.push({
        content: res.data.data,
        ai: true,
        id,
      });
      nextTick(() => {
        uni.pageScrollTo({
          scrollTop: 2000000, //滚动到页面的目标位置（单位px）
          duration: 0, //滚动动画的时长，默认300ms，单位 ms
        });
      });
      loading.value = false;
    },
    fail: function (err) {
      loading.value = false;
      const id = Math.random() * 1000000000000000000;
      chatList.value.push({
        content: "AI教练暂时无法回答您的问题",
        ai: true,
        id,
      });
      nextTick(() => {
        uni.pageScrollTo({
          scrollTop: 2000000, //滚动到页面的目标位置（单位px）
          duration: 0, //滚动动画的时长，默认300ms，单位 ms
        });
      });
    },
  });

  content.value = "";
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 100rpx;
}
</style>
